<template>
	<view>
		<view class="container">
			<image src="/static/user/ronglu.png" mode="widthFix" class="ronglu_img"></image>
			<view class="stove_name">
				{{info.stove}}
				<view class="stove_item">
					{{info.content}}
				</view>
			</view>
			<view class="tips">
				请选择指定{{info.num}}个版权，熔炼成为随机版权
			</view>
			<view class="ronglu_list">
				<view class="ronglu_item" :class="{ronglu_on:item.has_choose}" v-for="item,id in list" :key="id"
					@tap="add_btn(item.goods_id)">
					<image :src="item.image" mode="aspectFill" class="ronglu_img"></image>
				</view>

				<view class="ronglu_item ronglu_on" @tap="add_btn('')">
					<image src="/static/user/add_btn.png" mode="widthFix" class="ronglu_img"></image>
				</view>
			</view>
		</view>


		<uni-popup ref="menu" :is-mask-click="true" type="top" :animation="true">
			<view class="background">

				<view class="ronglu_list bgnone" style="padding:30rpx 45rpx;" v-if="my_list.length">

					<view class="ronglu_item ronglu_on" v-if="!choose_id ||(choose_id && choose_id == item.goods_id)"
						@tap="choose(id)" :class="{on_select:item.onchoose}" v-for="item,id in my_list" :key="id">
						<image :src="item.image" mode="aspectFill" class="ronglu_img"></image>
					</view>

				</view>
				<view class="" style="height:260rpx ;"></view>
				<view class="bottom_box2">
					<view class="skew clear_btn" @tap="clear()">
						<text>清除所选</text>
					</view>
					<view class="skew confirm_btn" @tap="confirm_choose()">
						<text>确定</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="rewards" type="center" :isMaskClick="false">
			<view class="rewards_box">
				<view class="rewards_title">
					恭喜获得新版权
				</view>
				<image src="/static/user/rewards_light.png" mode="widthFix" class="rewards_light"></image>
				<image :src="openItem.image" mode="aspectFill" class="reward_img"></image>
				<view class="reward_name">
					{{openItem.name}}
				</view>
			</view>

			<view class="confirm_btn2 " @tap="confirm">
				确定
			</view>

		</uni-popup>

		<view class="bottom_box">
			<view class="submit_btn" @click="submitHandler()">
				<text>
					开始熔炼
				</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				info: {
					content: '',
					stove: '',
					num: 0
				},
				list: [],
				my_list: [],
				choose_id: '',


				on_choose_list: [],

				openItem: {},
			}
		},
		onLoad(options) {
			this.id = options.id;
			let data = {
				id: this.id
			}
			this.$api.getStoveInfo(data, res => {
				if (res.status) {
					this.info = res.data
				}
			})
			this.$api.getStoveMaterial(data, res => {
				if (res.status) {
					this.list = res.data
				}
			})
			this.init()
		},
		methods: {
			init: function() {
				let data = {
					id: this.id
				}



				this.$api.getStoveMy(data, res => {
					if (res.status) {
						this.my_list = res.data;
					}
				})
			},
			confirm: function() {
				this.$refs.rewards.close();
				uni.navigateBack({

				})
			},

			submitHandler: function() {
				let data = {
					ids: [],
					id: this.id
				}
				for (var i = 0; i < this.on_choose_list.length; i++) {
					data.ids.push(this.on_choose_list[i].sn)
				}

				uni.showModal({
					content: '确定熔炼版权吗？',
					success: (res) => {
						if (res.confirm) {
							this.$api.addMaterial(data, res => {
								if (res.status) {
									if (res.data == 70003) {
										this.$common.errorToShow(res.msg);

									} else {
										this.openItem = res.data;
										this.$refs.rewards.open()
									}
									this.init()
									this.clear()
								} else {
									this.$common.errorToShow(res.msg)
								}
							})
						}
					}
				});

			},
			add_btn: function(id) {
				this.choose_id = id;
				this.$refs.menu.open()
			},
			clear: function() {
				for (var i = 0; i < this.my_list.length; i++) {
					this.my_list[i].onchoose = false
				}
				this.confirm_choose()
			},
			confirm_choose: function() {
				let choose_list = []
				for (let i = 0; i < this.my_list.length; i++) {
					if (this.my_list[i].onchoose) {
						choose_list.push(this.my_list[i])
					}
				}

				for (let i = 0; i < this.list.length; i++) {
					this.list[i].has_choose = false
				}
				for (let j = 0; j < choose_list.length; j++) {
					for (let i = 0; i < this.list.length; i++) {
						if (!this.list[i].has_choose)
							if (this.list[i].goods_id == choose_list[j].goods_id) {
								this.list[i].has_choose = true;
								break
							}
					}
				}
				this.on_choose_list = choose_list;
				this.$forceUpdate()
				this.$refs.menu.close()
			},
			//选择一个版权
			choose: function(id) {
				console.log(id)
				//所需该版权的数量
				let num = 0;

				for (var i = 0; i < this.list.length; i++) {
					if (this.list[i].goods_id == this.my_list[id].goods_id)
						num++
				}

				let choosed_num = 0
				//计算已选择的该版权数量
				for (var i = 0; i < this.my_list.length; i++) {
					if (this.my_list[id].goods_id == this.my_list[i].goods_id && this.my_list[i].onchoose) {
						choosed_num++;
					}
				}

				if (!this.my_list[id].onchoose) {
					if (choosed_num >= num) return
					this.my_list[id].onchoose = true
				} else {
					this.my_list[id].onchoose = false
				}

				this.$forceUpdate()
			}
		}
	}
</script>
<style>
	.on_select {
		border: 2px solid #F4E1BC !important
	}

	.ronglu_list::after {
		content: '';
		width: 200rpx;
	}

	.login_btn {
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;

		position: relative;
		margin-top: 109rpx;
		margin: 0 auto;
		margin-bottom: 50rpx;
		color: #433009;
		font-weight: bold;
	}



	.login_btn text {
		position: relative;
		color: #f7e2ba;
	}

	.can text {
		color: #433009;
	}

	.login_btn_img {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.on_select {
		border: 2px solid #F4E1BC !important
	}


	.confirm_btn {
		width: 300rpx;
		height: 90rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;

		background: linear-gradient(180deg, #F2D7AA 0%, #DEBC86 100%);
		color: #2C2E2E;
		border-radius: 10rpx;

	}

	.clear_btn {
		width: 300rpx;
		height: 90rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		border: 2rpx solid #E5E5E5;
		color: #e5e5e5;
		border-radius: 10rpx;
	}

	.bottom_box2 {
		width: 100%;
		height: 200rpx;
		position: fixed;
		background-color: #1b181c;
		bottom: 0;
		/* #ifdef H5 */
		bottom: 88rpx;
		/* #endif */
		padding: 40rpx 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.background {
		width: 100%;
		height: 100vh;
		background-color: #252527;
		position: relative;
		overflow-y: scroll;
	}
</style>
<style lang="scss">
	.ronglu_list {
		width: 100%;
		background: #202126;
		box-shadow: 0px 10rpx 40rpx rgba(0, 0, 0, 0.53);
		border-radius: 20rpx;
		padding: 25rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		.ronglu_item {
			width: 200rpx;
			height: 200rpx;
			border-radius: 20rpx;
			position: relative;
			filter: grayscale(1);
			display: flex;
			align-items: center;
			justify-content: center;

			margin-bottom: 20rpx;
			overflow: hidden;

			.ronglu_img {
				width: 200rpx;
				height: 200rpx;
				border-radius: 20rpx;

			}
		}

		.ronglu_on {
			filter: grayscale(0);
		}
	}

	.bgnone {
		background: none;
		box-shadow: none;
	}

	.tips {
		padding-top: 100rpx;
		line-height: 33rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		padding-bottom: 20rpx;
	}

	.stove_name {
		padding-top: 16rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 35rpx;
		color: #F2D7AA;

		.stove_item {
			font-size: 24rpx;
			padding-top: 10rpx;
			color: #fff;
		}
	}

	.ronglu_img {
		width: 437rpx;
		height: 437rpx;
		display: block;
		margin: 0 auto;
	}

	.container {
		width: 100%;
		padding: 150rpx 30rpx;
		padding-bottom: 0;
	}
</style>
